<template>
  <div class="course-notice-div">
      <div class="course-notice-card">
          <!-- <div>
              结束时间：
          </div> -->
          <div class="notice-card-time">
              <el-date-picker
                v-model="data"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择结束日期">
                </el-date-picker>

                <el-time-picker
                style="margin-left:2%;"
                v-model="time"
                value-format="HH:mm:ss"
                :picker-options="{
                selectableRange: '00:00:00 - 23:59:00'
                }"
                placeholder="选择结束时间">

                </el-time-picker>
                <el-button style="margin-left:2%;" 
                @click="putMsg"
                type="success" icon="el-icon-check" circle></el-button>


          </div>

            

          <div class="notice-card-text">

            <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入发布的公告内容"
                v-model="noticce">
                </el-input>
          </div>

          <div style="margin-top:2%">

          
          </div>
      </div>
  </div>
</template>

<script>
import { putNotice } from '../../api/course'

export default {
    props:['courseId'],
    data() {
        return {
            noticce: "",
            data:"",
            time:"",
        }
    },
    methods: {
        putMsg() {
            if(this.courseId != undefined) {

                console.log(this.noticce, this.data,this.time)
                putNotice({courseId:this.courseId,endTime:this.data+"T"+this.time, msg:this.noticce}).then(res => {
                    if( res.code == 200 ) {
                        this.$message({
                                message: '发布成功',
                                type: 'success'
                        });
                    }else {
                        this.$message.error('发布失败: ' + res.data.error);
                    }
                }).catch(err => {
                    this.$message.error('网络不太好啊 : ' + err);
                })

            }
        }
    }
}
</script>

<style>
.course-notice-div {
    margin:2%;
    width: 96%;
    min-height: 200px;
    display: flex;
    justify-content: center;
}

.notice-card-time {
    margin-top: 5%;
    /* height: 50px; */
    display: flex;  
}

.notice-card-text {
    margin-top: 2%;
    flex: 2;
}

.course-notice-card {
    width: 500px;
    min-height: 200px;
    /* background-color: tomato; */

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

/* .notice-card-text > .el-textarea .el-textarea__inner{ 
  resize: both;
} */

</style>